<template>
	<div>
		<div class="item"
			 v-for="(item,index) in categoryList"
			 :key="index"
		>
			<div class="title border-bottom">
				<span class="title-icon iconfont">&#xe70c;</span>
				{{item.title}}
			</div>
			<div v-if="item.children"><!--此处为递归组件 -->
				<detail-list :categoryList="item.children"></detail-list>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:'DetailList',
	props:{
		categoryList:Array
	}
}
</script>

<style lang="stylus" scoped>
	.border-bottom
		&:before
			border-color: #ccc
		&:after
			border-color: #ccc
	.item
		padding-left: .2rem
		font-size: .3rem
		.title
			height: .6rem
			line-height: .6rem
			.title-icon
				color: blue
</style>
